<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>产品展示 - {$site_title}</title>
    <link rel="stylesheet" type="text/css" href="__THEME__/assets/css/zui.min.css" />
    <script src="__THEME__/assets/js/jquery.js"></script>
    <script src="__THEME__/assets/js/zui.min.js"></script>
    <style type="text/css">
        /* 效果来源：https://demo.bootstrapious.com/varkala/1-1/category-full.html */
        .products {
            position: relative;
            overflow: hidden;
        }

        .products .media-wrapper {
            position: relative;
        }

        .products .image-front {
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            max-width: 100%;
        }

        .products .product-image-front {
            position: relative;
            cursor: pointer;
            transition: opacity 0.5s ease-in-out;
            z-index: 10;
        }

        .products:hover .product-image-front {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="page-wrapper">
        <div class="container">
            <ul class="breadcrumb">
                <li><span class="breadcrumb-title">当前位置：</span></li>
                <li><a href="/">首页</a></li>
                <li><a href="/product/c7.html">互联网</a></li>
                <li class="active">互联网</li>
            </ul>
            <div class="row">
                <div class="col-md-9 pull-right">
                    <section class="cards artlist" style="padding-top: 0;">
                        <div class="col-sm-4 col-xs-6">
                            <div class="card products">
                                <a href="/product/6.html" class="media-wrapper">
                                    <img src="/uploads/products/girl01-01.jpg"
                                        class="image-front product-image-front" />
                                    <img src="/uploads/products/girl01-02.jpg" class="image-front" />
                                </a>
                                <div class="card-heading">
                                    <div class="text-nowrap text-ellipsis text-center">
                                        <a href="/product/6.html" class="text-muted">黄黑色超个性创意网站</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                            <div class="card products">
                                <a href="/product/6.html" class="media-wrapper">
                                    <img src="/uploads/products/girl02-01.jpg"
                                        class="image-front product-image-front" />
                                    <img src="/uploads/products/girl02-02.jpg" class="image-front" />
                                </a>
                                <div class="card-heading">
                                    <div class="text-nowrap text-ellipsis text-center">
                                        <a href="/product/6.html" class="text-muted">黄黑色超个性创意网站</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                            <div class="card products">
                                <a href="/product/6.html" class="media-wrapper">
                                    <img src="/uploads/products/girl03-01.jpg"
                                        class="image-front product-image-front" />
                                    <img src="/uploads/products/girl03-02.jpg" class="image-front" />
                                </a>
                                <div class="card-heading">
                                    <div class="text-nowrap text-ellipsis text-center">
                                        <a href="/product/6.html" class="text-muted">黄黑色超个性创意网站</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                            <div class="card products">
                                <a href="/product/6.html" class="media-wrapper">
                                    <img src="/uploads/products/girl04-01.jpg"
                                        class="image-front product-image-front" />
                                    <img src="/uploads/products/girl04-02.jpg" class="image-front" />
                                </a>
                                <div class="card-heading">
                                    <div class="text-nowrap text-ellipsis text-center">
                                        <a href="/product/6.html" class="text-muted">黄黑色超个性创意网站</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="col-md-3">
                    <div class="panel artcate">
                        <div class="panel-heading">
                            <i class="icon panel-icon icon-th-large"></i> 主题展示
                        </div>
                        <ul class="nav">
                            <li class="active"><a href="/product/c7.html">互联网</a></li>
                            <li><a href="/product/c8.html">投资金融</a></li>
                            <li><a href="/product/c9.html">教育培训</a></li>
                            <li><a href="/product/c10.html">健康养生</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>